import React, { ReactElement, useState } from 'react'
import { Card, Tag, Upload, message, Button, Input } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import './style.css'

interface Props {
    index?: number
}


function getBase64(img: any, callback: any) {
    
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    console.log(reader.result)
    reader.readAsDataURL(img);
}

function beforeUpload(file: any, fileList: any) {
    console.log(fileList)
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}



export default function BannerCard({ index }: Props): ReactElement {
    const [loading, setLoading] = useState(false)
    const [imageUrl, setImageUrl] = useState("")
    const [val, setVal] = useState("")

    function handleChange(info: any) {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            console.log(info.file.response)
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (imageUrl: any) => {
                setLoading(false)
                setImageUrl(imageUrl)
            }
            );
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    return (
        <Card title="广告标题" className='mb20' bordered={false} style={{ width: 280 }}>
            <Tag className="mb20" color="processing">广告位{index}</Tag>
            <div className='push-url'>
                <span>
                    图片
                </span>
                <Upload
                    // name="avatar"
                    withCredentials
                    listType="picture-card"
                    className="avatar-uploader ml25"
                    showUploadList={false}
                    onPreview={() => {
                        console.log(1)
                    }}
                    // 上传地址
                    action="/api/admin/api/upload/ad"
                    // beforeUpload  上传之前的判断(大小的判断，后缀的判断)
                    beforeUpload={beforeUpload}
                    // 
                    onChange={handleChange}
                    headers={{
                        Authorization: sessionStorage.getItem('token')
                    }}
                >
                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
            </div>

            <div className='push-url'>
                <span>
                    跳转连接
                </span>
                <Input value={val} onChange={(ev) => {
                    setVal(ev.target.value)
                }} />
            </div>
            <Button type="primary" danger>删除</Button>
        </Card>
    )
}
